import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';

import { cardHeaderDefaultProps } from './defaultProps';
import type { CardHeaderOptions } from './type';

export interface CardHeaderProps extends CardHeaderOptions, HTMLAttributes<HTMLDivElement> {}

const CardHeader: FC<CardHeaderProps> = (props) => {
  const { className, as, aligned, children, forwardedRef, ...cardHeaderProps } = props;

  return createElement(
    as!,
    { ref: forwardedRef, className: classNames(aligned, { aligned }, 'header', className), ...cardHeaderProps },
    children,
  );
};

CardHeader.displayName = 'CardHeader';
CardHeader.defaultProps = cardHeaderDefaultProps;

export default CardHeader;
